<template>
	<view>
		<u-navbar title="房源发布" :background="background" back-icon-color="#ffffff" title-color="#ffffff"></u-navbar>
		<view class="container">
			<view class="u-p-12 u-text-center u-font-sm tips u-type-warning">有图片的房源电话增加 50%</view>
			<view class="p-lr-50">
				<u-form :model="form" ref="uForm">
					<!-- 图片上传 -->
					<u-upload ref="uUpload" :action="upload.action" :file-list="upload.fileList" :max-count="9"></u-upload>
					<u-line class="u-border-color" />
					<!-- 发布类型 -->
					<u-form-item label="发布类型" label-position="top" :required="true" class="">
						<u-radio-group v-model="form.htype">
							<u-radio v-for="(item, index) in htype.list" :key="index" :name="item.value">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<!-- 城 市 -->
					<u-form-item label="城 市" :label-width="150" :required="true">
						<u-input v-model="showcitypickerinput" placeholder="选择城市" @click="showcitypicker = true" disabled="" class="uni-input-input" />
						<city-select v-model="showcitypicker" @city-change="cityChange"></city-select>
					</u-form-item>
					<!-- 所属小区 -->
					<u-form-item label="所属小区" :label-width="150" :required="true">
						<u-input v-model="form.hdistrict"  placeholder="请选择所属小区" type="cell"  />
					</u-form-item>
					<!-- 房源名称 -->
					<u-form-item label="房源名称" :label-width="150" :required="true" prop="hname"><u-input v-model="form.hname" placeholder="请输入房源名称" /></u-form-item>
					<!-- 户型 -->
					<u-form-item label="户 型" :label-width="150" :required="true">
						<view class="u-flex">
							<u-input type="select" v-model="shiLabel" @click="showhousetype = true" class="houseytype" input-align="center" />
							<text class="u-m-l-20 u-m-r-20">室</text>
							<u-input type="select" v-model="tingLabel" @click="showhousetype = true" class="houseytype" input-align="center" />
							<text class="u-m-l-20 u-m-r-20">厅</text>
							<u-input type="select" v-model="weiLabel" @click="showhousetype = true" class="houseytype" input-align="center" />
							<text class="u-m-l-20">卫</text>
							<u-select v-model="showhousetype" mode="mutil-column" :list="housetype.list" @confirm="selectHousetypeCallback"></u-select>
						</view>
					</u-form-item>
					<!-- 楼层 -->
					<u-form-item label="楼 层" :label-width="150" :required="true">
						<view class="u-flex">
							<text class="u-m-r-30">第</text>
							<u-input v-model="form.floor" class="houseytype" input-align="center" type="number" />
							<text class="u-m-l-30">层</text>
							<text class="u-m-l-20 u-m-r-30">共</text>
							<u-input v-model="form.floorSum" class="houseytype" input-align="center" type="number" />
							<text class="u-m-l-30">层</text>
						</view>
					</u-form-item>
					<!-- 面积 -->
					<u-form-item label="面 积" :label-width="150" :required="true" prop="hsquare">
						<u-input v-model="form.hsquare" placeholder="价格面议填0" />
						<view slot="right"><text decode class="u-main-color">平方米</text></view>
					</u-form-item>
					<!-- 面积类型 -->
					<u-form-item v-if="form.htype == 1 || form.htype == 2">
						<u-radio-group v-model="form.areatype">
							<u-radio v-for="(item, index) in areatype.list" :key="index" :name="item.name">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<!-- 价格 -->
					<u-form-item v-if="form.htype == 1 || form.htype == 2" label="价 格" :label-width="150" :required="true" prop="sellPrice">
						<u-input v-model="form.sellPrice" placeholder="价格面议填0" />
						<view slot="right"><text decode class="u-main-color">万元</text></view>
					</u-form-item>
					<u-form-item v-else label="价 格" :label-width="150" :required="true" prop="sellPrice">
						<u-input v-model="form.sellPrice" placeholder="价格面议填0" />
						<view slot="right"><text decode class="u-main-color">元/月</text></view>
					</u-form-item>
					<!-- 价格类型 -->
					<u-form-item v-if="form.htype == 1 || form.htype == 2">
						<u-radio-group v-model="form.pricetype">
							<u-radio v-for="(item, index) in pricetype.list" :key="index" :name="item.name">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<!--中介推广-->
					<u-form-item label="中介推广" label-position="left" :required="true" :label-width="150">
						<u-radio-group v-model="form.zjtg">
							<u-radio v-for="(item, index) in zjtg.list" :key="index" :name="item.name">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<!-- 有效期 -->
					<u-form-item label="有效期" :label-width="150" :required="true">
						<u-input v-model="yxqLabel" type="select" @click="show = true" />
						<u-select v-model="show" :list="yxq.list" @confirm="selectCallback"></u-select>
						<view slot="right"><text decode class="u-main-color">天</text></view>
					</u-form-item>
					<!-- 住宅性质 -->
					<u-form-item label="住宅性质" :label-width="150" :required="true">
						<u-input v-model="zzxzLabel" type="select" @click="showzzxz = true" />
						<u-select v-model="showzzxz" :list="zzxz.list" @confirm="selectZzxzCallback"></u-select>
					</u-form-item>
					<!-- 适宜用途 -->
					<u-form-item label="适宜用途" :label-width="150" :required="true">
						<u-input v-model="syytLabel" type="select" @click="showsyyt = true" />
						<u-select v-model="showsyyt" :list="syyt.list" @confirm="selectSyytCallback"></u-select>
					</u-form-item>
					<!-- 物业形态 -->
					<u-form-item label="物业形态" :label-width="150" :required="true">
						<u-input v-model="wyxtLabel" type="select" @click="showwyxt = true" />
						<u-select v-model="showwyxt" :list="wyxt.list" @confirm="selectWyxtCallback"></u-select>
					</u-form-item>
					<!-- 装修状况 -->
					<u-form-item label="装修状况" :label-width="150" :required="true">
						<u-input v-model="zxzkLabel" type="select" @click="showzxzk = true" />
						<u-select v-model="showzxzk" :list="zxzk.list" @confirm="selectZxzkCallback"></u-select>
					</u-form-item>
					<!-- 房屋配置 -->
					<u-form-item label="房屋配置" label-position="top" :required="true" class="">
						<view class="tags">
							<u-tag
								class="tag"
								v-for="(item, index) in tags"
								:key="index"
								:index="index"
								:text="item.text"
								:show="true"
								:bg-color="item.bgcolor"
								:border-color="item.bordercolor"
								color="#ffffff"
								@click="tagclick"
							/>
						</view>
					</u-form-item>
					<!--联系人-->
					<u-form-item label="联系人" label-position="left" :required="true" :label-width="150">
						<u-radio-group v-model="form.connectSex">
							<u-radio v-for="(item, index) in sex.list" :key="index" :name="item.name">{{ item.name }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<!--联系电话-->
					<u-form-item label="联系电话" :label-width="150" :required="true" prop="connectPhone">
						<u-input v-model="form.connectPhone" placeholder="请输入联系电话" />
					</u-form-item>
					<!--房源描述-->
					<u-form-item><u-input type="textarea" v-model="form.houseDesc" placeholder="请输入房源描述" /></u-form-item>
					<!-- 客服热线 -->
					<view class="u-m-t-30 u-m-b-30">
						<view class="u-p-18 u-text-center u-font-sm customer">
							<u-icon name="phone" class="u-m-r-10" color="#E73A1D"></u-icon>
							<text>客服热线：18888888888</text>
						</view>
					</view>
					<!-- 提交 -->
					<view><u-button type="warning" ripple @click="submit">提交</u-button></view>
				</u-form>
			</view>
			<view class="safe"></view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import citySelect from '../common/u-city-select.vue';
export default {
	data() {
		return {
			lat: '',
			lon: '',
			showcitypicker: false,
			showcitypickerinput: '',
			locAddress: '',
			adcode: '',
			province: '',
			city: '',
			district: '',
			background: {
				backgroundColor: '#FA8513'
				// 导航栏背景图
				// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				// backgroundSize: 'cover',
				// 渐变色
				// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
			},
			show: false,
			showzzxz: false,
			showsyyt: false,
			showwyxt: false,
			showzxzk: false,
			showhousetype: false,
			yxqLabel: '3',
			zzxzLabel: '住宅',
			syytLabel: '居住',
			wyxtLabel: '多层',
			zxzkLabel: '毛坯',
			shiLabel: 0,
			tingLabel: 0,
			weiLabel: 0,
			tags: [
				{
					text: '防盗门窗',
					key: 'a',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '封阳台',
					key: 'b',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '自行车库',
					key: 'c',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '公用车库',
					key: 'd',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '电梯',
					key: 'e',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '车位',
					key: 'f',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '汽车库',
					key: 'g',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '天然气',
					key: 'h',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '热水器',
					key: 'i',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '冰箱',
					key: 'j',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '电视机',
					key: 'k',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '有线电视',
					key: 'l',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '宽带',
					key: 'm',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '露台',
					key: 'n',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '院子',
					key: 'o',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '可做饭',
					key: 'p',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '家电齐全',
					key: 'q',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				},
				{
					text: '拎包入住',
					key: 'r',
					selected:false,
					bgcolor: '#b0b0b0',
					bordercolor: '#b0b0b0'
				}
			],
			upload: {
				action: 'http://www.mksoft.cn/zx/front/zhuangxiu/uploadHouseImg',
				fileList: []
			},

			rules: {
				hname: [
					{
						required: true,
						message: '请输入房源名称',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				hsquare: [
					{
						required: true,
						message: '请输入面积',
						trigger: ['change', 'blur']
					}
				],
				sellPrice: [
					{
						required: true,
						message: '请输入价格',
						trigger: ['change', 'blur']
					}
				],
				connectPhone: [
					{
						required: true,
						message: '请输入联系人电话',
						trigger: ['change', 'blur']
					}
				]
			},
			form: {
				htype: 1,
				hsquare: '',
				hname: '',
				province: '',
				city: '',
				district: '',
				hdistrict: '',
				address: '',
				houseytype: [0, 0, 0],
				floor: 0,
				floorSum: 0,
				areatype: '无',
				sellPrice: '',
				pricetype: '税费各自承担',
				zjtg: "拒绝中介",
				connectSex: '先生',
				connectPhone: '',
				houseDesc: '',
				yxq: '3',
				zzxz: '住宅',
				syyt: '居住',
				wyxt: '多层',
				zxzk: '毛坯',
				shiValue: '0',
				tingValue: '0',
				weiValue: '0',
				tags: '',
				himages: '',
				
			},
			housetype: {
				list: [
					[
						{
							value: '0',
							label: '0室'
						},
						{
							value: '1',
							label: '1室'
						},
						{
							value: '2',
							label: '2室'
						},
						{
							value: '3',
							label: '3室'
						},
						{
							value: '4',
							label: '4室'
						},
						{
							value: '5',
							label: '5室'
						},
						{
							value: '6',
							label: '6室'
						}
					],
					[
						{
							value: '0',
							label: '0厅'
						},
						{
							value: '1',
							label: '1厅'
						},
						{
							value: '2',
							label: '2厅'
						},
						{
							value: '3',
							label: '3厅'
						},
						{
							value: '4',
							label: '4厅'
						},
						{
							value: '5',
							label: '5厅'
						},
						{
							value: '6',
							label: '6厅'
						}
					],
					[
						{
							value: '0',
							label: '0卫'
						},
						{
							value: '1',
							label: '1卫'
						},
						{
							value: '2',
							label: '2卫'
						},
						{
							value: '3',
							label: '3卫'
						},
						{
							value: '4',
							label: '4卫'
						},
						{
							value: '5',
							label: '5卫'
						},
						{
							value: '6',
							label: '6卫'
						}
					]
				]
			},
			syyt: {
				list: [
					{ label: '居住', value: 1 },
					{ label: '商铺', value: 2 },
					{ label: '办公', value: 3 },
					{ label: '仓库', value: 4 },
					{ label: '厂房', value: 5 },
					{ label: '车库', value: 6 },
					{ label: '单身公寓', value: 7 }
				]
			},
			wyxt: {
				list: [{ label: '多层', value: 1 }, { label: '小高层', value: 2 }, { label: '高层', value: 3 }, { label: '别墅', value: 4 }, { label: '平房', value: 5 }]
			},
			zxzk: {
				list: [
					{ label: '毛坯', value: 1 },
					{ label: '简装', value: 2 },
					{ label: '精装', value: 3 },
					{ label: '混合装', value: 4 },
					{ label: '新豪华装', value: 5 },
					{ label: '清水装', value: 6 },
					{ label: '柚木装', value: 7 }
				]
			},
			zzxz: {
				list: [{ label: '住宅', value: 1 }, { label: '非住宅', value: 2 }]
			},
			yxq: {
				list: [{ label: '3', value: 1 }, { label: '5', value: 2 }, { label: '7', value: 3 }, { label: '30', value: 4 }, { label: '60', value: 5 }]
			},
			sex: {
				list: [{ name: '先生', value: 1 }, { name: '女士', value: 2 }]
			},

			zjtg: {
				list: [{ name: '欢迎中介', value: 1 }, { name: '拒绝中介', value: 2 }]
			},

			htype: {
				list: [{ name: '卖房', value: 1 }, { name: '买房', value: 2 }, { name: '出租', value: 3 }, { name: '租房', value: 4 }]
			},

			areatype: {
				list: [{ name: '无', value: 1 }, { name: '楼中楼', value: 2 }, { name: '复式楼', value: 3 }]
			},

			pricetype: {
				list: [{ name: '税费各自承担', value: 1 }, { name: '我要求净价', value: 2 }]
			}
		};
	},
	components: {
		citySelect
	},
	onShow() {
		let that = this;
		uni.getStorage({
			key: 'myAddress',
			success: function(res) {
				if (res) {
					that.form.hdistrict = res.data.name;
					that.form.hname = res.data.name;
					that.form.address = res.data.address;
					uni.removeStorageSync('myAddress');
				}
			}
		});
	},
	onLoad(option) {
		let that = this;
		if (option.index) {
			this.form.htype = option.index;
		}
		if (this.$wechat && this.$wechat.isWechat()) {
			this.$wechat.location(function(res) {
				that.lat = res.latitude;
				that.lon = res.longitude;
				uni.request({
					url: 'http://www.mksoft.cn/zx/front/gaode/coordinateConvert', //接口地址
					data: {
						lat: res.latitude,
						lon: res.longitude,
						needPois: '0'
					},
					success: res => {
						if (res.data.code == 200) {
							if (res.data.data.adcode) {
								// 获取到了定位
								that.locAddress = res.data.data.formattedAddress;
								that.adcode = res.data.data.adcode;
								that.province = res.data.data.province;
								that.city = res.data.data.city;
								that.district = res.data.data.district;
								that.showcitypickerinput = res.data.data.province + '-' + res.data.data.city + '-' + res.data.data.district;
								that.form.province =  res.data.data.province;
								that.form.city = res.data.data.city;
								that.form.district = res.data.data.district;
							}
						}
					},
					fail: res => {
						console.log('经纬度转换fail-----', res);
					}
				});
			});
		} else {
			uni.getLocation({
				type: 'gcj02',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					that.lat = res.latitude;
					that.lon = res.longitude;
					uni.request({
						url: 'http://www.mksoft.cn/zx/front/gaode/coordinateConvert', //接口地址
						data: {
							lat: res.latitude,
							lon: res.longitude,
							needPois: 0
						},
						success: res => {
							if (res.data.code == 200) {
								if (res.data.adcode != '[]') {
									// 获取到了定位
									that.locAddress = res.data.data.formattedAddress;
									that.adcode = res.data.data.adcode;
									that.province = res.data.data.province;
									that.city = res.data.data.city;
									that.district = res.data.data.district;
									that.showcitypickerinput = res.data.data.province + '-' + res.data.data.city + '-' + res.data.data.district;
									that.form.province =  res.data.data.province;
									that.form.city = res.data.data.city;
									that.form.district = res.data.data.district;
								}
							}
						},
						fail: res => {
							console.log('经纬度转换fail-----', res);
						}
					});
				}
			});
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		route2choiceplace() {
			if (!this.showcitypickerinput) {
				this.$refs.uToast.show({
					title: '请先选择城市'
				});
				return false;
			}
			this.$Router.push({
				path: '/pages/addressList/addressList',
				query: {
					locAddress: this.locAddress,
					province: this.province,
					city: this.city,
					district: this.district,
					lat: this.lat,
					lon: this.lon
				}
			});
		},
		cityChange(e) {
			this.showcitypickerinput = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.province = e.province.label;
			this.city = e.city.label;
			this.district = e.area.label;
			this.form.province = e.province.label;
			this.form.city = e.city.label;
			this.form.district = e.area.label;
		},
		selectCallback(e) {
			this.yxqLabel = e[0].label;
			this.form.yxq = e[0].label;
		},
		selectZzxzCallback(e) {
			this.zzxzLabel = e[0].label;
			this.form.zzxz = e[0].label;
		},
		selectSyytCallback(e) {
			this.syytLabel = e[0].label;
			this.form.syyt = e[0].label;
		},
		selectWyxtCallback(e) {
			this.wyxtLabel = e[0].label;
			this.form.wyxt = e[0].label;
		},
		selectZxzkCallback(e) {
			this.zxzkLabel = e[0].label;
			this.form.zxzk = e[0].label;
		},
		selectHousetypeCallback(e) {
			this.shiLabel = e[0].value;
			this.tingLabel = e[1].value;
			this.weiLabel = e[2].value;
			this.form.shiValue = e[0].value;
			this.form.tingValue = e[1].value;
			this.form.weiValue = e[2].value;
		},
		tagclick(index) {
			if (!this.tags[index].selected) {
				// 选中
				this.tags[index].selected = true;
				this.tags[index].bgcolor = '#FA8513';
				this.tags[index].bordercolor = '#FA8513';
			} else {
				// 取消选中
				this.tags[index].selected = false;
				this.tags[index].bgcolor = '#b0b0b0';
				this.tags[index].bordercolor = '#b0b0b0';
			}
		},

		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let files = this.$refs.uUpload.lists.filter(val => {
						return val.progress == 100;
					});
					console.log(files);
					let fileStr = '';
					for (let i = 0; i < files.length; i++) {
						fileStr += files[i].response.data + ',';
					}
					//去掉最后一个逗号(如果不需要去掉，就不用写)
					if (fileStr.length > 0) {
						fileStr = fileStr.substr(0, fileStr.length - 1);
					}
					this.form.himages = fileStr;
					let tags = "";
					this.tags.forEach(item=>{
						if(item.selected){
							tags += item.text + ",";
						}
					})
					if (tags.length > 0) {
						tags = tags.substr(0, tags.length - 1);
					}
					let data = {
							himages: this.form.himages,
							htype: this.form.htype,
							province: this.form.province,
							city: this.form.city,
							district: this.form.district,
							hdistrict: this.form.hdistrict,
							hname: this.form.hname,
							hShiNum: this.form.shiValue,
							hTingNum: this.form.tingValue,
							hWeiNum: this.form.weiValue,
							hFloor: this.form.floor,
							hFloorSum: this.form.floorSum,
							hsquare: this.form.hsquare,
							squareType: this.form.areatype,
							sellPrice: this.form.sellPrice,
							sellPriceType: this.form.pricetype,
							needZhongjie: this.form.zjtg,
							yxq: this.form.yxq,
							zzx: this.form.zzxz,
							syyt: this.form.syyt,
							wyxt: this.form.wyxt,
							zxzk: this.form.zxzk,
							tags: tags,
							connectSex: this.form.connectSex,
							connectPhone: this.form.connectPhone,
							houseDesc: this.form.houseDesc,
							userId: 100
						};
					uni.request({
						url: 'http://www.mksoft.cn/zx/front/zhuangxiu/publishHouse', //接口地址
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						method: 'POST',
						data: data,
						success: res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '提交成功，客服稍后与您联系',
									duration: 2500
								});
							} else {
								uni.showToast({
									title: '提交失败',
									duration: 2000
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.safe {
	width: 100vw;
	height: 100rpx;
}
.tips {
	background-color: #fff2da;
}
.customer {
	background-color: #f3f3f3;
	color: $u-main-color;
}
.houseytype {
	background-color: #f3f3f3;
	@include center;
}

.p-lr-50 {
	padding-left: 50rpx !important;
	padding-right: 50rpx !important;
}
.tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	.tag {
		margin-left: 5rpx;
		margin-top: 5rpx;
	}
}
</style>
